<template>
    <div class="i_bg">  
        <div class="content mar_20">
            <img src="../../../assets/images/img2.jpg" />        
        </div>
        <div class="content mar_20">
            <div class="two_t">
            	<span class="fr"><a href="#">修改</a></span>商品列表
            </div>
                        <table border="0" class="car_tab" style="width:1110px;" cellspacing="0" cellpadding="0">
              <tr>
                <td class="car_th" width="150">商品名称</td>
                <td class="car_th" width="140">描述</td>
                <td class="car_th" width="150">购买数量</td>
                <td class="car_th" width="130">小计</td>
              </tr>
              <tr v-for="item in goods" :key="item.id">
                <td>
                    <div class="c_s_img"><img :src="'http://192.168.79.98:9001/'+item.fileName" width="73" height="73" /></div>
                    {{ item.name }}
                </td>
                <td align="center">{{ item.description }}</td>
                <td align="center">{{ item.count }}</td>
                <td align="center" style="color:#ff4e00;">￥{{ countNumber(item.price,"*",item.count) }}</td>
              </tr>
              <tr>
                <td colspan="5" align="right" style="font-family:'Microsoft YaHei';">
                    商品总价：￥{{ totalPrice }} 
                </td>
              </tr>
            </table>
            <div class="two_t">
            	<span class="fr"><router-link to="/back-index/show-address" href="#">修改收货信息</router-link></span>收货人信息
            </div>
            <table border="0" class="peo_tab" style="width:1110px;" cellspacing="0" cellpadding="0">
              <tr>
                <td class="p_td" width="160">收货人</td>
                <td width="395">{{ userInfo.loginName }}</td>
                <td class="p_td" width="160">电子邮件</td>
                <td width="395">{{ userInfo.email }}</td>
              </tr>
              <tr>
                <td class="p_td">收获地址</td>
                <td>
                    <el-select @visible-change="showAddress" v-model="address" placeholder="请选择" no-data-text="暂无收货地址">
                        <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.address"
                        :value="item.address">
                        </el-option>
                    </el-select>
                </td>
                <td class="p_td">手机</td>
                <td>{{ userInfo.mobile }}</td>
              </tr>
            </table>
            
            <div class="two_t">
            	支付方式
            </div>
            <ul class="pay">
                <li @click="changeWay(1)" :class="{'checked':payway==1}">微信
                    <div :class="{'show':payway == 1}" class="ch_img" ></div>
                </li>
                <li @click="changeWay(0)" :class="{'checked':payway==0}">支付宝
                    <div :class="{'showBorder':payway == 2}" class="ch_img" ></div>
                </li>
            </ul>

             <table border="0" style="width:900px; margin-top:20px;" cellspacing="0" cellpadding="0">
              <tr>
                <td align="right">
                    商品总价: <font color="#ff4e00">￥{{ totalPrice }}</font> 
                </td>
              </tr>
              <tr height="70">
                <td align="right">
                	<b style="font-size:14px;">应付款金额：<span style="font-size:22px; color:#ff4e00;">￥{{ totalPrice }}</span></b>
                </td>
              </tr>
              <tr height="70">
                <td align="right"><a @click="addOrder(userInfo.id,userInfo.loginName,address,totalPrice,payway)"><img src="../../../assets/images/btn_sure.gif" /></a></td>
              </tr>
            </table>

        </div>
    </div>
</template>

<script>
import computeNumber from '@/assets/js/computeNumber';
export default {
    name:'CartTwo',
    mounted(){
        this.getUserInfo();
        
    },
    computed:{
        goods(){
            return this.$route.params.goods||this.$store.state.goods||[];
        },
        totalPrice(){
            return this.goods.reduce((sum,item)=>{
                let count = item.count;
                let price = item.price;
                if (!isNaN(price) && !isNaN(count)) {
                    return computeNumber(sum, '+', computeNumber(price, '*', count).result).result;
                }
                return sum;
            },0);
        }
    },
    data:function(){
        return{
            userInfo:{},
            payway:-1,
            selectdPayway:false,
            outTradeNo:'',
            options:[],
            hasAddress:true,
            address:''
        }
    },
    methods:{

        //查询用户地址
        showAddress(v){
            if(!v){
                return;
            }
            this.$axios({
                url:'/easybuy/address/getById',
            }).then(rs=>{
                this.options = rs.data.list;
                console.log(rs);
                if(this.options.length == 0){
                    this.$message.error('请先添加收货地址！');
                    this.hasAddress = false;
                }
            })
        },
        //添加订单
        addOrder(userId,loginName,userAddress,cost,way){
            if(this.payway == -1){
                this.$message.error('请选择支付方式');
                return;
            }
            if(!this.hasAddress){
                this.$message.error('请先添加收获地址！');
                return;
            }
            let idArr = this.goods.reduce((arr,item)=>{
                    arr.push(item.id);
                    return arr;
            },[])
            let quantityArr = this.goods.reduce((arr,item)=>{
                    arr.push(item.count);
                    return arr;
            },[])
            let priceArr = this.goods.reduce((arr,item)=>{
                    arr.push(item.price);
                    return arr;
            },[])
            this.$axios({
                method:'post',
                url:'/easybuy/order/add',
                data:{
                    loginName,
                    userAddress,
                    cost,
                    way,
                    idArr,
                    priceArr,
                    quantityArr
                }
            }).then(rs=>{
                //重新获取redis中的购物车信息
                this.getCarts();
                this.outTradeNo = rs.data.outTradeNo;
                this.$router.replace({path:'/cart-three',query:{'outTradeNo':this.outTradeNo,'payway':this.payway,'totalPrice':this.totalPrice}})
            })
        },
        getCarts(){
            this.$axios({
                url:'/easybuy/cart/all'
            }).then(rs=>{
                //将购物车数据存放到vuex中
                window.sessionStorage.setItem('cartList',JSON.stringify(rs.data.productVoList));
                this.$store.commit('changeCartList',rs.data.productVoList);
                
            })
        },
        changeWay(num){
            this.payway = num;
            // alert(this.payway);
        },
        //查询用户收货信息
        getUserInfo(){
            this.$axios({
                url:'/easybuy/user/getUserInfo'
            }).then(rs=>{
                this.userInfo = rs.data.user;
            })
        },
        //解决精度问题，计算价格
        countNumber(num1,type,num2){
           return computeNumber(num1,type,num2).result;
        },
    }
}
</script>

<style scoped>
ul.pay li.checked{
	height:36px; line-height:36px; padding:0 24px; overflow:hidden; border:2px solid #ff4e00;
}
</style>